<template>
  <div class="edit-project">
    <div class="breadcrumb">
      <router-link to="/dashboard">控制面板</router-link> &gt; 
      <router-link :to="`/project/${id}`">项目详情</router-link> &gt;
      <span>编辑项目</span>
    </div>
    
    <div v-if="loading" class="loading">
      <p>数据加载中，请稍候...</p>
    </div>
    
    <div v-else-if="error" class="error">
      <p>{{ error }}</p>
      <button @click="retryLoading" class="btn btn-outline-primary">重新加载</button>
    </div>
    
    <div v-else class="form-container">
      <h1>编辑医疗研究项目</h1>
      
      <form @submit.prevent="updateProject">
        <div class="form-group">
          <label for="title">项目标题 <span class="required">*</span></label>
          <input 
            id="title" 
            type="text" 
            v-model="projectData.title" 
            required
            placeholder="请输入项目标题"
            autocomplete="off"
          >
        </div>
        
        <div class="form-group">
          <label for="researcherInfo">项目描述 <span class="required">*</span></label>
          <textarea 
            id="description" 
            v-model="projectData.description" 
            rows="5" 
            required
            placeholder="请详细描述您的医疗研究项目"
          ></textarea>
        </div>
        
        <div class="form-group">
          <label for="researcherInfo">研究者信息 <span class="required">*</span></label>
          <textarea 
            id="researcherInfo" 
            v-model="projectData.researcherInfo" 
            rows="3" 
            required
            placeholder="请输入研究者或研究团队信息"
          ></textarea>
        </div>
        
        <div class="form-group">
          <label for="updateReason">更新原因 <span class="required">*</span></label>
          <textarea 
            id="updateReason" 
            v-model="projectData.updateReason" 
            rows="2" 
            required
            placeholder="请输入此次更新的原因"
          ></textarea>
        </div>
        
        <div class="form-actions">
          <button type="button" class="btn btn-secondary" @click="goBack">取消</button>
          <button type="submit" class="btn btn-primary" :disabled="submitting">
            {{ submitting ? '更新中...' : '更新项目' }}
          </button>
        </div>
      </form>
    </div>
  </div>
</template>

<script>
export default {
  name: 'EditProject',
  props: {
    id: {
      type: [String, Number],
      required: true
    }
  },
  data() {
    return {
      loading: true,
      submitting: false,
      error: null,
      projectData: {
        title: '',
        description: '',
        researcherInfo: '',
        updateReason: ''
      }
    }
  },
  async created() {
    try {
      // 获取项目数据
      const result = await this.$store.dispatch('projects/fetchProject', this.id)
      
      if (!result || !this.$store.state.projects.currentProject) {
        this.error = '无法加载项目数据'
        return
      }
      
      const project = this.$store.state.projects.currentProject
      
      // 设置表单数据
      this.projectData = {
        title: project.description || '',
        description: project.researcherInfo || '',
        researcherInfo: project.userInfo || '',
        updateReason: project.updateReason || ''
      }
    } catch (error) {
      this.error = error.response?.data?.message || '加载项目数据时出错'
      console.error('Error loading project:', error)
    } finally {
      this.loading = false
    }
  },
  methods: {
    async updateProject() {
      try {
        this.submitting = true
        
        // 确保所有必填字段都已填写
        if (!this.projectData.title || !this.projectData.description || !this.projectData.researcherInfo || !this.projectData.updateReason) {
          this.error = '请填写所有必填字段'
          return
        }
        
        // 调用 store action 更新项目
        const result = await this.$store.dispatch('projects/updateProject', {
          projectId: this.id,
          data: this.projectData
        })
        
        if (result.success) {
          // 更新成功，返回项目详情页
          this.$router.push(`/project/${this.id}`)
        } else {
          this.error = result.error || '更新项目失败'
        }
      } catch (error) {
        this.error = error.response?.data?.message || '更新项目失败'
        console.error('Error updating project:', error)
      } finally {
        this.submitting = false
      }
    },
    goBack() {
      this.$router.go(-1)
    },
    async retryLoading() {
      try {
        this.loading = true;
        this.error = null;
        
        // 重新获取项目数据
        const result = await this.$store.dispatch('projects/fetchProject', this.id);
        
        if (!result || !this.$store.state.projects.currentProject) {
          this.error = '无法加载项目数据';
          return;
        }
        
        const project = this.$store.state.projects.currentProject;
        
        // 设置表单数据
        this.projectData = {
          title: project.description || '',
          description: project.researcherInfo || '',
          researcherInfo: project.userInfo || '',
          updateReason: ''
        };
      } catch (error) {
        this.error = error.response?.data?.message || '加载项目数据时出错';
        console.error('Error loading project:', error);
      } finally {
        this.loading = false;
      }
    }
  }
}
</script>

<style scoped>
.edit-project {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.breadcrumb {
  margin-bottom: 20px;
  color: #7f8c8d;
  font-size: 0.9rem;
}

.breadcrumb a {
  color: #3498db;
  text-decoration: none;
}

.breadcrumb a:hover {
  text-decoration: underline;
}

.loading, .error {
  text-align: center;
  padding: 40px 0;
}

.error {
  color: #dc3545;
}

.form-container {
  background-color: #fff;
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

h1 {
  margin-bottom: 30px;
  color: #333;
  text-align: center;
}

.form-group {
  margin-bottom: 20px;
}

label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
}

.required {
  color: #dc3545;
}

input, textarea {
  width: 100%;
  padding: 10px;
  font-size: 0.95rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-sizing: border-box;
  font-family: inherit;
  line-height: 1.4;
}

textarea {
  resize: vertical;
  min-height: 100px;
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 30px;
}

.btn {
  padding: 10px 16px;
  font-size: 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.btn-primary {
  background-color: #007bff;
  color: white;
}

.btn-primary:hover {
  background-color: #0069d9;
}

.btn-secondary {
  background-color: #6c757d;
  color: white;
}

.btn-secondary:hover {
  background-color: #5a6268;
}

.btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}
</style> 